<template>
    <div class="main">
        <div class="main-header" v-if="buttons.length">
            <el-button v-for="(item, index) in buttons" :key="index" :type="item.path | formatType" :icon="item.icon"
                v-show="item.name != 'hidden'" :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{
                    item.title }}</el-button>
        </div>
        <el-table :data="list" border header-cell-class-name="main-table-header" ref="table" class="main-table"
            height="100%" row-key="id" default-expand-all @selection-change="onSelectionChange" @row-click="onRowClick">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="ID" prop="id" width="100"></el-table-column>
            <el-table-column label="项目分类名称" prop="name"></el-table-column>
            <el-table-column label="模版图标">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.img" fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="开启状态" prop="status">
                <template slot-scope="{row}">
                    <el-switch disabled v-model="row.status" :active-value="2" :inactive-value="1"></el-switch>
                </template>
            </el-table-column>
           
        </el-table>
        <add-template v-model="addShow" :editRows="editRows" @close="editRows = []" @update="getList"></add-template>
    </div>
</template>
<script>
import addTemplate from "./add.vue";
export default {
    data() {
        return {
            addShow: false,
            list: [],
            editRows: [],
            selection: [],
            page:1
        };
    },
    components: {
        addTemplate,
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        },
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            try {
                let res = await this.$get({
                    url: "/admin/project.projectCate/index",
                    loading: true,
                    params:{
                        page:this.page,
                    }
                });
                this.total = res.total;
                this.list = res.list;
            } catch (err) {
                this.$message.error(err);
            }
        },
        deleteTemplate() {
            this.$confirm(
                `此操作将永久删除该${this.selection.length}个需求单, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            ).then(async() => {
                try {
                    let query = "?";
                    for (let i = 0; i < this.selection.length; i++) {
                        const item = this.selection[i];
                        if (i > 0) {
                            query += "&ids[]=" + item.id;
                        } else {
                            query += "ids[]=" + item.id;
                        }
                    }
                    await this.$del({
                        url: '/admin/project.projectCate/del' + query,
                        loading: true,
                        successTip: true,
                    })
                    this.getList()
                } catch (err) {
                    this.$message.error(err)
                }
            }).catch(() => {
                console.log('cancel')
            })

        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        hasRule() {
            let has = this.buttons.find(item => item.path == 'rule')
            return has ? true : false
        },
        tapButton(e) {
            console.log(e)
            switch (e.name) {
                case "add":
                    this.addShow = true;
                    break;
                case "delete":
                    this.deleteTemplate()
                    break;
                case "edit":
                    this.editRows = JSON.parse(JSON.stringify(this.selection))
                    this.editRows.forEach((item) => {
                        item.img = [{
                            url: item.img,
                            uid: Math.random().toFixed(10)
                        }]
                    })
                    break;
                default:
                    console.log("1");
                    break;
            }
        },
    },
};
</script>
